<template>
  <div>
    <CloudCheckboxGroup v-model="value" @change="onChange">
      <CloudRow>
        <CloudCol :span="8">
          <CloudCheckbox value="A"> A </CloudCheckbox>
        </CloudCol>
        <CloudCol :span="8">
          <CloudCheckbox value="B"> B </CloudCheckbox>
        </CloudCol>
        <CloudCol :span="8">
          <CloudCheckbox value="C"> C </CloudCheckbox>
        </CloudCol>
        <CloudCol :span="8">
          <CloudCheckbox value="D"> D </CloudCheckbox>
        </CloudCol>
        <CloudCol :span="8">
          <CloudCheckbox value="E"> E </CloudCheckbox>
        </CloudCol>
      </CloudRow>
    </CloudCheckboxGroup>
  </div>
</template>

<script>
export default {
  title: '6.布局',
  subTitle: 'Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局',
  data() {
    return {
      value: []
    }
  },
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    },
  }
}
</script>

<style lang="scss">
</style>